﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>US State Literacy Rates</title>

    <link rel="stylesheet" href="styles/ColorGradients.css"/>
    
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <style type="text/css">
        .states {
            fill: none;
            fill-opacity: 0.7;
            stroke: rgb(0,0,0);
            stroke-width: .5px;
            stroke-linejoin: round;
        }

            .states path:hover {
                fill: rgba(0, 255, 255, 0.5);
            }

        #legend {
            position: absolute;
            bottom: 50px;
            right: 10px;
            background-color: rgba(255,255,255,0.8);
            border-radius: 5px;
            width: 70px;
            height: 75px;
            line-height: 15px;
            padding: 10px;
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            font-size: 12px;
        }
        
            #legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }

    </style>
</head>
<body onload="getMap()">
    <div id="myMap"></div>
    <div id="legend"></div>

    <script type="text/javascript">
        var map, d3MapTools, stateLayer;

        function getMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'YOUR_BING_MAPS_KEY',
                center: new Microsoft.Maps.Location(52, -115),
                zoom: 4
            });

            //Register and load the D3 Overlay Module
            Microsoft.Maps.registerModule("D3OverlayModule", "scripts/D3OverlayManager.js");
            Microsoft.Maps.loadModule("D3OverlayModule", {
                callback: loadStates
            });
        }

        function loadStates() {
            d3MapTools = new D3OverlayManager(map);
            stateLayer = d3MapTools.addLayer({
                loaded: function (svg, projection) {
                    var nameById = d3.map();
                    var rateById = d3.map();
                    var popuationById = d3.map();

                    var max = 20;

                    var quantize = d3.scale.quantize()
                        .domain([0, max])
                        .range(d3.range(9).map(function (i) { return "q" + i + "-9"; }));

                    queue()
                        .defer(d3.json, 'data/US_States_Counties_TopoJson.js')
                        .defer(d3.tsv, 'data/US_State_Literacy.tsv', function (d) {
                            nameById.set(d.fipsCode, d.stateName);
                            rateById.set(d.fipsCode, +d.lackingLiteracy);
                            popuationById.set(d.fipsCode, d.population);
                        })
                        .await(function (error, us) {
                            svg.append("g")
                              .attr("class", "states YlOrRd")
                            .selectAll("path")
                              .data(topojson.feature(us, us.objects.states).features)
                            .enter().append("path")
                              .attr("class", function (d) {
                                  //Set the class of the state based on the litracy rate found using the state name.
                                  return quantize(rateById.get(d.id));
                              })
                              .attr("d", projection)
                            .on('click', function (feature) {
                                alert('State: ' + nameById.get(feature.id) +
                                    '\r\nPopulation: ' + popuationById.get(feature.id) +
                                    '\r\nPercantage Lacking Literacy: ' + rateById.get(feature.id) + '%');
                            });
                        });

                    //Create HTML for legend
                    var legendHtml = [];
                    var increment = max / 4;

                    for (var i = max; i >= 0; i -= increment) {
                        legendHtml.push('<svg width="12" height="12" class="YlOrRd"><rect width="12" height="12" class="');
                        legendHtml.push(quantize(i),'"></rect></svg> ');
                        legendHtml.push((i == max)? i + '+' : i + '-' + (i+increment), '<br/>');
                    }

                    document.getElementById('legend').innerHTML = legendHtml.join('');
                }
            });
        }
    </script>
</body>
</html>
